[#assign title]房间管理[/#assign]
[#include "/common/_layout.html"/]
[#macro style]
<style></style>
[/#macro]
[#macro body]
<mt-navbar v-model="selected">
    <mt-tab-item id="open">进行中的游戏</mt-tab-item>
    <mt-tab-item id="close">全部</mt-tab-item>
</mt-navbar>
<mt-tab-container v-model="selected">
    <mt-tab-container-item id="open" class="roomOpenLoadMore-panel pre-scrollable"
                           :style="{'max-height': roomListHeight}">
        <mt-loadmore :top-method="refresh" ref="roomOpenLoadMore" infinite-scroll-distance="30">
            <mt-cell v-for="room in roomOpenLoadMore.list" is-link :to="'/room/chat/' + room.id">
                <template slot="title">[第{{room.period}}期]{{room.name}}【{{room.region}}】</template>
                <span :class="[room.status == 'COMPLETED' ? 'text-success' : 'text-danger']">{{room.status | roomStatusFilter}}</span>
            </mt-cell>
        </mt-loadmore>
        <div class="page-infinite-loading d-flex justify-content-center">
            <span v-show="roomOpenLoadMore.allLoaded">没有更多了</span>
            <div v-show="!roomOpenLoadMore.allLoaded">
                <div class="d-flex align-items-center">
                    <mt-spinner type="fading-circle" class="mr-2"></mt-spinner>
                    加载中...
                </div>
            </div>
        </div>
    </mt-tab-container-item>
    <mt-tab-container-item id="close" class="roomCloseLoadMore-panel pre-scrollable"
                           :style="{'max-height': roomListHeight}">
        <mt-loadmore :top-method="refresh" ref="roomCloseLoadMore"
                     infinite-scroll-disabled="roomCloseLoadMore.allLoaded" v-infinite-scroll="loadMore"
                     infinite-scroll-distance="30">
            <mt-cell v-for="room in roomCloseLoadMore.list">
                <template slot="title">
                    <span class="mint-cell-text">[第{{room.period}}期]{{room.name}}【{{room.region}}】</span>
                    <span class="mint-cell-label">结束时间:{{room.closeDate | formatDate}}</span>
                </template>
                <span :class="[room.status == 'COMPLETED' ? 'text-success' : 'text-danger']">{{room.status | roomStatusFilter}}</span>
            </mt-cell>
        </mt-loadmore>
        <div class="page-infinite-loading d-flex justify-content-center">
            <span v-show="roomCloseLoadMore.allLoaded">没有更多了</span>
            <div v-show="!roomCloseLoadMore.allLoaded">
                <div class="d-flex align-items-center">
                    <mt-spinner type="fading-circle" class="mr-2"></mt-spinner>
                    加载中...
                </div>
            </div>
        </div>
    </mt-tab-container-item>
</mt-tab-container>
[/#macro]
[#macro script]
<script>
    var app = new Vue({
        el: '#app',
        data: {
            selected: 'open',
            roomOpenLoadMore: {
                allLoaded: false,
                list: []
            },
            roomCloseLoadMore: {
                page: 0,
                allLoaded: false,
                list: []
            },
            roomStatusMapping: {},
            roomListHeight: '0px'
        },
        methods: {
            /** 计算面板高度 */
            calcRoomListHeight: function () {
                var vm = this;
                vm.$nextTick(function () {
                    vm.roomListHeight = vm.calcScrollHeight('.roomOpenLoadMore-panel.pre-scrollable') + 'px';
                });
            },
            /** 刷新房间 */
            refresh: function () {
                var vm = this;
                if (vm.selected == 'open') {
                    vm.roomOpenLoadMore.allLoaded = true;
                    axios.post('/room/list/open').then(function (response) {
                        vm.roomOpenLoadMore.list = response.data;
                        vm.$refs.roomOpenLoadMore.onTopLoaded();
                    }).catch(function (err) {
                        vm.$refs.roomOpenLoadMore.onTopLoaded();
                    });
                } else {
                    vm.page = 1;
                    vm.roomCloseLoadMore.allLoaded = false;
                    axios.post('/room/list/complete', {page: vm.page}).then(function (response) {
                        vm.roomCloseLoadMore.list = response.data;
                        vm.$refs.roomCloseLoadMore.onTopLoaded();
                    }).catch(function (err) {
                        vm.$refs.roomCloseLoadMore.onTopLoaded();
                    });
                }
            },
            /** 加载更多房间 */
            loadMore: function () {
                var vm = this;
                vm.page++;
                vm.roomCloseLoadMore.allLoaded = false;
                axios.post('/room/list/complete', {page: vm.page}).then(function (response) {
                    var data = response.data;
                    vm.roomCloseLoadMore.list = vm.roomCloseLoadMore.list.concat(data);
                    if (data.length < 10) {
                        vm.roomCloseLoadMore.allLoaded = true;
                    }
                    // vm.$refs.roomCloseLoadMore.onBottomLoaded();
                }).catch(function (err) {
                    // vm.$refs.roomCloseLoadMore.onBottomLoaded();
                });
            }
        },
        computed: {},
        filters: {
            roomStatusFilter: function (status) {
                return app.roomStatusMapping[status];
            }
        },
        watch: {
        },
        mounted: function () {
            appHeader.isShow = false;
            appFooter.isShow = true;
            var vm = this;
            axios.post('/room/status').then(function (response) {
                vm.roomStatusMapping = response.data;
            });
            vm.refresh();
            vm.calcRoomListHeight();
        }
    });
</script>
[/#macro]